import { VxeColumn, VxeTable, VxeTablePropTypes } from "vxe-table";
import "./ops-table.scss";
export default defineComponent({
	name: "OpsTable",
	setup() {
		interface RowVO {
			ip: string;
			hostname: string;
			runtime: string;
			memory: string;
			cpu_core: string;
			load_5m: string;
			cpu_utilization_rate: string;
			memory_utilization_rate: string;
			swap_utilization_rate: string;
			disk_read: string;
			disk_write: string;
			connect_num: string;
			tcp_tw: string;
			download_bandwidth: string;
			upload_bandwidth: string;
		}

		const tableData = ref<RowVO[]>([
			{
				ip: "172.16.22.181",
				hostname: "4bad6e23aff7",
				runtime: "1.45 hour",
				memory: "11.67 GiB",
				cpu_core: "8",
				load_5m: "0.24",
				cpu_utilization_rate: "4.75%",
				memory_utilization_rate: "17.18%",
				swap_utilization_rate: "75.53%",
				disk_read: "0 B/s",
				disk_write: "85.27 kB/s",
				connect_num: "1",
				tcp_tw: "118",
				download_bandwidth: "207.47 b/s",
				upload_bandwidth: "3.11 kb/s"
			},
			{
				ip: "三三云",
				hostname: "155457f8892e",
				runtime: "4.55 week",
				memory: "7.13 GiB",
				cpu_core: "2",
				load_5m: "0.10",
				cpu_utilization_rate: "15.44%",
				memory_utilization_rate: "47.49%",
				swap_utilization_rate: "56.22%",
				disk_read: "3.39 MB/s",
				disk_write: "21.04 MB/s",
				connect_num: "1",
				tcp_tw: "1.68 K",
				download_bandwidth: "274.40 b/s",
				upload_bandwidth: "5.42 kb/s"
			},
			{
				ip: "walle云",
				hostname: "24d734618eeb",
				runtime: "30.68 week",
				memory: "15.51 GiB",
				cpu_core: "8",
				load_5m: "1.62",
				cpu_utilization_rate: "20.30%",
				memory_utilization_rate: "26.89%",
				swap_utilization_rate: "22.63%",
				disk_read: "136.53 B/s",
				disk_write: "1.61 MB/s",
				connect_num: "1",
				tcp_tw: "41",
				download_bandwidth: "234.40 b/s",
				upload_bandwidth: "4.15 kb/s"
			},
			{
				ip: "172.16.22.181",

				hostname: "4bad6e23aff7",
				runtime: "1.45 hour",
				memory: "11.67 GiB",
				cpu_core: "8",
				load_5m: "0.24",
				cpu_utilization_rate: "4.75%",
				memory_utilization_rate: "17.18%",
				swap_utilization_rate: "46.46%",
				disk_read: "0 B/s",
				disk_write: "85.27 kB/s",
				connect_num: "1",
				tcp_tw: "118",
				download_bandwidth: "158.93 b/s",
				upload_bandwidth: "4.06 kb/s"
			},

			{
				ip: "方海云",
				hostname: "29e82e7ab1f2",
				runtime: "25.40 week",
				memory: "3.50 GiB",
				cpu_core: "2",
				load_5m: "0.59",
				cpu_utilization_rate: "18.04%",
				memory_utilization_rate: "32.30%",
				swap_utilization_rate: "18.79%",
				disk_read: "168.76 kB/s",
				disk_write: "143.45 kB/s",
				connect_num: "1",
				tcp_tw: "0",
				download_bandwidth: "222.67 b/s",
				upload_bandwidth: "3.13 kb/s"
			},
			{
				ip: "三三云",
				hostname: "155457f8892e",
				runtime: "4.55 week",
				memory: "7.13 GiB",
				cpu_core: "2",
				load_5m: "0.10",
				cpu_utilization_rate: "15.44%",
				memory_utilization_rate: "24.53%",
				swap_utilization_rate: "65.78%",
				disk_read: "1.24 MB/s",
				disk_write: "289.95 kB/s",
				connect_num: "1",
				tcp_tw: "0",
				download_bandwidth: "207.47 b/s",
				upload_bandwidth: "3.11 kb/s"
			}
		]);
		// interface RowVO {
		// 	id: number;
		// 	name: string;
		// 	role: string;
		// 	sex: string;
		// 	age: number;
		// 	address: string;
		// }

		// const tableData = ref<RowVO[]>([
		// 	{ id: 10001, name: "Test1", role: "Develop", sex: "Man", age: 28, address: "test abc" },
		// 	{ id: 10002, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou" },
		// 	{ id: 10003, name: "Test3", role: "PM", sex: "Man", age: 32, address: "Shanghai" },
		// 	{ id: 10004, name: "Test4", role: "Designer", sex: "Women", age: 24, address: "Shanghai" }
		// ]);

		const headerCellClassName: VxeTablePropTypes.HeaderCellClassName<RowVO> = () => "ops-table-header-cell";
		const headerRowClassName: VxeTablePropTypes.HeaderRowClassName<RowVO> = () => "ops-table-header-row";
		const cellClassName: VxeTablePropTypes.CellClassName<RowVO> = ({ row, column }) => {
			let className = "ops-table-cell";
			const list = [
				"cpu_utilization_rate",
				"memory_utilization_rate",
				"swap_utilization_rate",
				"disk_read",
				"disk_write",
				"connect_num",
				"tcp_tw",
				"download_bandwidth",
				"upload_bandwidth"
			];
			if (list.indexOf(column.field) !== -1) {
				className = "ops-table-cell ops-table-cell-green";
			}
			if (column.field === "swap_utilization_rate") {
				const rate = row.swap_utilization_rate.substring(0, row.swap_utilization_rate.length - 1);

				if (parseFloat(rate) >= 75) {
					className = "ops-table-cell ops-table-cell-red";
				} else if (parseFloat(rate) >= 50) {
					className = "ops-table-cell ops-table-cell-orange";
				}
			}
			return className;
		};
		return () => (
			<div>
				<VxeTable
					data={tableData.value}
					border={true}
					header-row-class-name={headerRowClassName}
					header-cell-class-name={headerCellClassName}
					cell-class-name={cellClassName}
				>
					<VxeColumn field="ip" title="IP（链接到明细）"></VxeColumn>
					<VxeColumn field="hostname" title="主机名"></VxeColumn>
					<VxeColumn field="runtime" title="运行时间"></VxeColumn>
					<VxeColumn field="memory" title="内存"></VxeColumn>
					<VxeColumn field="cpu_core" title="CPU核"></VxeColumn>
					<VxeColumn field="load_5m" title="5m负载"></VxeColumn>
					<VxeColumn field="cpu_utilization_rate" title="CPU使用率"></VxeColumn>
					<VxeColumn field="memory_utilization_rate" title="内存使用率"></VxeColumn>
					<VxeColumn field="swap_utilization_rate" title="分区使用率*"></VxeColumn>
					<VxeColumn field="disk_read" title="磁盘读取*"></VxeColumn>
					<VxeColumn field="disk_write" title="磁盘写入*"></VxeColumn>
					<VxeColumn field="connect_num" title="连接数"></VxeColumn>
					<VxeColumn field="tcp_tw" title="TCP_tw"></VxeColumn>
					<VxeColumn field="download_bandwidth" title="下载带宽*"></VxeColumn>
					<VxeColumn field="upload_bandwidth" title="上传带宽*"></VxeColumn>
				</VxeTable>

				{/* <VxeTable data={tableData.value}>
					<VxeColumn type="seq" width="60"></VxeColumn>
					<VxeColumn field="name" title="Name"></VxeColumn>
					<VxeColumn field="sex" title="Sex"></VxeColumn>
					<VxeColumn field="age" title="Age"></VxeColumn>
				</VxeTable> */}
			</div>
		);
	}
});
